<!--
 * @Author: wangming
 * @Date: 2020-09-09 14:04:55
 * @LastEditors: wangming
 * @LastEditTime: 2021-05-18 10:40:29
 * @Description:添加类别按钮
-->
<template>
  <el-dialog :visible="showVisible" center :show-close="false" width="480px">
    <div class="b g3 f16 tl" slot="title">
      <div class="ks-row-between pl15 pr15">
        <span>正则校验</span>
        <span
          class="el-icon-close g9 f26 poi"
          @click="showVisible = false"
        ></span>
      </div>
    </div>
    <el-form
      class="pl30 pr30"
      :model="FormData"
      inline
      ref="Form"
      label-position="left"
      :rules="rules"
      label-width="150px"
    >
      <el-form-item label="正则校验规则" prop="regexp">
        <!-- <el-input
          style="width: 240px"
          v-model="FormData.regexp"
          size="small"
          placeholder="请输入"
        ></el-input> -->
        <el-select
          style="width: 240px"
          v-model="FormData.regexp"
          allow-create
          filterable
          placeholder="请选择或输入正则校验规则"
        >
          <el-option
            v-for="item in commonReg"
            :key="item.value"
            :label="item.label + '(' + item.value + '）'"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item prop="regexpMessage">
        <template slot="label">
          <span class="mr10">验证失败提示语</span>
          <GlobalizationConfigWord
            @setLangCode="setLangCode"
            :localism="i18n"
          ></GlobalizationConfigWord>
        </template>
        <el-input
          style="width: 240px"
          v-model="FormData.regexpMessage"
          size="small"
          placeholder="请输入"
        ></el-input>
      </el-form-item>
    </el-form>

    <div slot="footer" class="tr">
      <el-button @click="showVisible = false">取 消</el-button>
      <el-button type="primary" @click="submit">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import GlobalizationConfigWord from "@/components/globalizationConfigWord.vue";
import { cloneDeep } from "lodash";
const commonReg = [
  { label: "18位身份证", value: "/^[1-9]\\d{5}(?:18|19|20)\\d{2}(?:0[1-9]|10|11|12)(?:0[1-9]|[1-2]\\d|30|31)\\d{3}[\\dXx]$/" },
  { label: "手机号", value: "/^1\\d{10}$/" },
  { label: "邮箱", value: "/^\\w+([-+.]\\w+)*@\\w+([-.]\\w+)*\\.\\w+([-.]\\w+)*$/" },
  { label: "中文", value: "/^[\\u4E00-\\u9FA5]+$/" },
  { label: "英文", value: "/^[A-Za-z]+$/" },
  { label: "邮编", value: "/[1-9]\\d{5}(?!\\d)/" },
];
export default {
  components: {
    GlobalizationConfigWord,
  },
  computed: {
    i18n() {
      return this.FormData?.regexpMessageI18n;
    },
  },
  data() {
    return {
      commonReg,
      rules: {
        regexp: [
          { required: true, message: "请输入正则校验规则", trigger: "blur" },
          {
            validator: (rule, value, callback) => {
              try {
                if (eval(value) instanceof RegExp) {
                  callback();
                } else {
                  callback(new Error("请输入正则表达式"));
                }
              } catch (error) {
                callback(new Error("请输入正则表达式"));
              }
            },
            trigger: "blur",
          },
        ],
        regexpMessage: [
          {
            required: true,
            message: "请输入正则校验报错信息",
            trigger: "blur",
          },
        ],
      },
      FormData: {
        regexp: "", // 正则校验规则
        regexpMessage: "", //正则校验报错信息
        regexpMessageI18n: "",
      },
      showVisible: false,
      callback: () => {},
    };
  },
  methods: {
    setLangCode(langcode) {
      this.$set(this.FormData, "regexpMessageI18n", langcode);
    },
    editForm(FormData = {}) {
      this.FormData = cloneDeep(FormData);
      return this.showModel();
    },
    addForm() {
      this.FormData = {};
      return this.showModel();
    },
    showModel() {
      this.showVisible = true;
      this.$nextTick(() => {
        this.$refs.Form.clearValidate();
      });
      return {
        then: (callback) => {
          if (typeof callback === "function") {
            this.callback = callback;
          }
        },
      };
    },
    async submit() {
      try {
        await this.$refs.Form.validate();
        this.showVisible = false;
        console.log(this.FormData);
        this.callback(this.FormData);
      } catch (error) {}
    },
  },
};
</script>

<style lang="scss" scoped>
.max {
  width: 220px;
}
</style>
